<!doctype html>
<!--[if lt IE 7 ]> <html lang="en" class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<meta charset="UTF-8">
<head>
<meta name="viewport" content="width = 1050, user-scalable = no" />
	<script src="js/vue.js"></script>
	<script src="element-ui/lib/index.js"></script>
	<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
	<script type="text/javascript" src="js/jquery.min.1.7.js"></script>
	<script type="text/javascript" src="js/modernizr.2.5.3.min.js"></script>
	<script src="js/MyJsComponent/flipbook.js"></script>
	<style>
		.box-card {
			opacity: 0.5;
			margin: 10px;
			color: blue;
		}
		body{
			position: absolute;
			width: 100%;
			height: 100%;
			margin: 0;
		}
		#page_menu{
			display: flex;
			flex-direction: column;
			width: 100%;
			height: 100%;
		}
		#body_menu{
			flex-grow: 1;
		}
		.container{
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.side-box{
			right: -75px;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			height: 600px;
		}

	</style>
</head>
<body>
<div id="page_menu">
<div id="navigation_bar">
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
	<el-submenu index="1">
		<template slot="title">
			<div class="demo-basic--circle">
				<div class="block"><el-avatar :size="50" :src="circleUrl"></el-avatar></div>
				<div class="block" v-for="size in sizeList" :key="size">
					<el-avatar :size="size" :src="circleUrl"></el-avatar>
				</div>
			</div>
		</template>
		<el-menu-item index="1-1">选项1</el-menu-item>
		<el-menu-item index="1-2">选项2</el-menu-item>
		<el-menu-item index="1-3">选项3</el-menu-item>
	</el-submenu>
	<el-menu-item index="2">轻食菜单</el-menu-item>
	<el-menu-item>消息订单</el-menu-item>
	<el-menu-item><el-link href="https://www.ele.me" target="_blank">健康打卡</el-link></el-menu-item>
	<el-menu-item><el-link href="https://www.ele.me" target="_blank">食材溯源</el-link></el-menu-item>
</el-menu>
</div>
<div id="body_menu">
<div class="flipbook-viewport">
	<div class="container">
		<div class="flipbook">
			<div style="background-image:url(img/4.jpg)" @click="show=!show">
				<transition name="el-fade-in-linear">
					<div class="transition-box" v-show="show">
						<el-card class="box-card" name="describe">
							<div class="text"><p>文字描述</p></div>
						</el-card>
						<el-card class="box-card" name="recommendedReason"><p>推荐理由</p></el-card>
					</div>
				</transition>
			</div>
			<div style="background-image:url(img/3.jpg)"></div>
			<div style="background-image:url(img/2.jpg)"></div>
		</div>
		<div class="side-box">
			<div class="box"><el-button>水果</el-button></div>
			<div class="box"><el-button>沙拉</el-button></div>
			<div class="box"><el-button>肉食</el-button></div>
			<div class="box"><el-button>饮品</el-button></div>
			<div class="box"><el-button>套餐</el-button></div>
		</div>
	</div>
</div>
</div>
</div>
<script>
	vm=new Vue({
		el:'#page_menu',
		data:()=>({
			show:true
		})
	})
</script>
</body>
</html>